import React from "react";
import { Tabs } from "antd-mobile";
import { StickyContainer, Sticky } from 'react-sticky';
// import ScollList from './components/scollList'
import { getNewsList } from '../../../apis/newslist'
import LoadMore from '../../../common/loadMore'
import ScollListRow0 from './components/scollListRow0';
import ScollListRow1 from './components/scollListRow1';
import ScollListRow2 from './components/scollListRow2';
import { ScollListRow0ul } from './style';
const tabs = [
    { title: "实时新闻", type: 0 },
    { title: "我的视频", type: 1 },
    { title: "简书新闻", type: 2 },
];
function renderTabBar(props) {
    return (<Sticky>
        {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
    </Sticky>);
}
function NewsList(props) {
    return (
        <StickyContainer>
            <Tabs tabs={tabs} onTabClick={props.onTabClick} renderTabBar={renderTabBar}>
                {tabs.map(i => {
                    let ShowList = "";
                    let type = Number(i.type)
                    if (type === 0) {
                        ShowList = ScollListRow0
                    } else if (type === 1) {
                        ShowList = ScollListRow1
                    } else {
                        ShowList = ScollListRow2
                    }
                    return <ScollListRow0ul key={type}>
                        <LoadMore {...props} params={{ type }} ShowListUl={ShowList} httpDatas={getNewsList} />
                    </ScollListRow0ul>
                })}
            </Tabs>
        </StickyContainer>
    );
}
export default NewsList;
